<template>
    <div>
      <div class="until_title relative">智慧管理
        <div class="circle_date">周期：{{pastTime}}~{{nowTime}}（30天）</div>
      </div>
      <div class="company_subTitle">
        <i class="iconfont icon-duobianxing"></i>
        <span>工地管理</span>
      </div>
      <!--工地管理-->
      <div class="filedManger">
        <div class="filedMangerItem">
          <div class="itemNum">{{filedManger.laborWorkers? filedManger.laborWorkers : 0}}</div>
          <div class="itemDec">进场劳务人数</div>
        </div>
        <div class="filedMangerItem">
          <div class="itemNum">{{filedManger.industrialWorkers? filedManger.industrialWorkers : 0}}</div>
          <div class="itemDec">产业工人数量</div>
        </div>
        <div class="filedMangerItem">
          <div class="itemNum">{{filedManger.dailyVisitors? filedManger.dailyVisitors : 0}}</div>
          <div class="itemDec">日均接待访客数</div>
        </div>
      </div>
      <div class="company_subTitle">
        <i class="iconfont icon-jiankong"></i>
        <span>安全监控</span>
      </div>
      <!--安全监控-->
      <div class="safeMonitor">
        <safeMonitor :chartData="(safeMonitor.deviceCoverage)/100"></safeMonitor>
        <safeMonitor :type="2" :chartData="(safeMonitor.videoCoverage)/100" :videoAvgNum="safeMonitor.videoAvgNum"></safeMonitor>
      </div>
      <div class="company_subTitle">
        <i class="iconfont icon-xiangmu"></i>
        <span>安全文明管理</span>
      </div>
      <!--安全文明管理-->
      <div class="civilization">
        <div class="civilizationItem">
          <div class="itemNum">
            {{civilization.rectificationQualityProblem}}
          </div>
          <div class="itemDec" style="letter-spacing: 1px">
            日均每项目
            <div style="height: 2px"></div>
            <div>
              整改质量问题
            </div>
          </div>
        </div>
        <div class="civilizationItem" style="letter-spacing: 1px">
          <div class="itemNum">
            {{civilization.safetyEducation}}
          </div>
          <div class="itemDec">
            日均每项目
            <div style="height: 2px"></div>
            <div>
              排查安全隐患
            </div>
          </div>
        </div>
        <div class="civilizationItem" style="letter-spacing: 1px">
          <div class="itemNum">
            {{civilization.securityRisksProblem}}
          </div>
          <div class="itemDec">
            日均每项目
            <div style="height: 2px"></div>
            <div>
              安全教育人次
            </div>
          </div>
        </div>
      </div>
      <div class="company_subTitle">
        <i class="iconfont icon-zu7"></i>
        <span>生产资源</span>
      </div>
      <!--生产资源-->
      <div class="productSource">
        <div class="sourceItem">
          <div class="sourceTop">
            <div class="sourceIcon">
              <i class="iconfont icon-tongji"></i>
            </div>
            <div class="sourceInfo">
              <div class="sourceDec">日均投入设备量</div>
              <div class="sourceNum">{{productSource.dailyDevices? productSource.dailyDevices : 0}}</div>
            </div>
          </div>
          <div class="averageHour">
            <div class="hourDec">设备日均有效工时：</div>
            <div class="hourNum">{{productSource.deviceWorkTime? productSource.deviceWorkTime : 0}}</div>
          </div>
        </div>
        <div class="sourceItem">
          <div class="sourceTop">
            <div class="sourceIcon">
              <i class="iconfont icon-gongren1"></i>
            </div>
            <div class="sourceInfo">
              <div class="sourceDec">日均投入劳务人数</div>
              <div class="sourceNum">{{productSource.dailyLaborWorkers? productSource.dailyLaborWorkers : 0}}</div>
            </div>
          </div>
          <div class="averageHour">
            <div class="hourDec">劳务日均工时：</div>
            <div class="hourNum">{{productSource.laborWorkTime? productSource.laborWorkTime : 0}}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'manger',
      data () {
        return {
          filedManger: {
            laborWorkers: 0,
            industrialWorkers: 0,
            dailyVisitors: 0
          },
          safeMonitor: {
            deviceCoverage: 0,
            videoCoverage: 0,
            videoAvgNum: 0
          },
          civilization: {
            rectificationQualityProblem: 0,
            safetyEducation: 0,
            securityRisksProblem: 0
          },
          productSource: {
            dailyDevices: 0,
            deviceWorkTime: 0,
            dailyLaborWorkers: 0,
            laborWorkTime: 0
          },
          nowTime: '',
          pastTime: ''
        }
      },
      components: {
        safeMonitor (resolve) {
          require(['./safeMonitor.vue'], resolve)
        }
      },
      computed: {
        ...mapGetters({
          currentUser: 'currentUser'
        })
      },
      mounted () {
        this.getWisdomManageInfo()
        this.getNowTimeAndPastTime()
      },
      watch: {
        currentUser () {
          if (this.currentUser.companyAdmin) {
            this.getWisdomManageInfo()
          }
        }
      },
      methods: {
        getNowTimeAndPastTime () {
          let date = new Date()
          date.setDate(date.getDate() - 1)
          let date2 = new Date(date)
          date2.setDate(date.getDate() - 29)
          this.nowTime = this.$moment(date).get('year') + '.' + (this.$moment(date).get('month') + 1) + '.' + this.$moment(date).get('date')
          this.pastTime = this.$moment(date2).get('year') + '.' + (this.$moment(date2).get('month') + 1) + '.' + this.$moment(date2).get('date')
        },
        getWisdomManageInfo () {
          let data = {
            mid: this.currentUser.mid,
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getWisdomManageInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            let data = res.data.data
            this.filedManger.laborWorkers = this.$toThousands(data.laborWorkers)
            this.filedManger.industrialWorkers = this.$toThousands(data.industrialWorkers)
            this.filedManger.dailyVisitors = data.dailyVisitors
            this.civilization.rectificationQualityProblem = this.$toThousands(data.rectificationQualityProblem)
            this.civilization.safetyEducation = this.$toThousands(data.safetyEducation)
            this.civilization.securityRisksProblem = this.$toThousands(data.securityRisksProblem)
            this.safeMonitor.deviceCoverage = data.deviceCoverage
            this.safeMonitor.videoCoverage = data.videoCoverage
            this.safeMonitor.videoAvgNum = data.videoAvgNum
            this.productSource.dailyDevices = this.$toThousands(data.dailyDevices)
            this.productSource.deviceWorkTime = data.deviceWorkTime
            this.productSource.dailyLaborWorkers = this.$toThousands(data.dailyLaborWorkers)
            this.productSource.laborWorkTime = data.laborWorkTime
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  .company_subTitle{
    color: #00E8FF;
    margin-bottom: 15px;
  }
  .circle_date {
    position: absolute;
    color: #A2BEE4;
    font-size: 14px;
    top: 0px;
    right: 0px;
  }
  .filedManger{
    display: flex;
    justify-content: space-around;
    .filedMangerItem{
      text-align: center;
      .itemNum{
        font-size:24px;
        font-weight:bold;
        color:rgba(242,242,242,1);
      }
      .itemDec{
        margin: 10px 0 20px 0;
        font-size:14px;
        font-weight:400;
        color:rgba(169,197,236,1);
      }
    }
  }
  .civilization{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .civilizationItem{
      text-align: center;
      .itemNum{
        font-size:24px;
        font-weight:bold;
        color:rgba(242,242,242,1);
      }
      .itemDec{
        font-size:14px;
        font-weight:400;
        color:rgba(162,189,227,1);
        margin: 10px 0 20px 0px ;
      }
    }
  }
  .productSource{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 5px;
    .sourceItem{
      .sourceTop{
        display: flex;
        justify-content: space-around;
        align-items: center;
        .sourceInfo{
          margin-left: 10px;
          .sourceDec{
            font-size:14px;
            font-weight:400;
            color:rgba(162,189,227,1);
            line-height:18px;
          }
          .sourceNum{
            margin-top: 5px;
            font-size:24px;
            font-weight:bold;
            color:rgba(242,242,242,1);
          }
        }
        .sourceIcon{
          > i {
            font-size: 44px;
          }
        }
      }
      .averageHour{
        display: flex;
        justify-content: flex-start;
        margin-top: 10px;
      }
    }
  }
</style>
